<template>
	<view class="joke column">
		<image class="joke-image" src="../../static/joke.jpeg"></image>
		<text class="joke-text">{{jokeText}}</text>
		<button class="joke-button" v-if="jokeText" @click="getJoke()" type="primary">换个笑话</button>
		<!-- 获取多条笑话 -->
		<!-- 注意：判断数组非空，需要判断数组的长度是否大于 0 -->
		<button v-if="jokeList.length > 0" @click="getJokeList()" type="warn">
			换组笑话列表
		</button>
		<view class="joke-list">
			<view class="joke-item" v-for="item in jokeList" :key="item">
				笑话：{{item}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 导入下拉刷新事件
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	//响应式数据，保存笑话
	const jokeText = ref('')
	//获取笑话
	const getJoke = async () => {
		//开启加载动画
		uni.showLoading({
			title: '笑话加载中...'
		})
		//发起网络请求
		const res = await uni.request({
			method: 'GET', //请求方式
			url: 'https://api-vue-base.itheima.net/api/joke', //请求地址
			data: {} //请求参数
		})
		console.log(res)
		//把后端返回的数据赋值给ref，数据驱动视图
		jokeText.value = res.data
		//关闭加载动画
		uni.hideLoading()
	}
	//先调用一次获取笑话，点击按钮时发送新的网络请求，获取新的笑话
	getJoke()

	// 获取多条笑话
	const jokeList = ref([])
	const getJokeList = async () => {
		// 网络请求需要等待，笑话加载中，显示 loading
		uni.showLoading({
			title: '笑话加载中...'
		})
		// 发送网络请求
		const res = await uni.request({
			method: 'GET', // 请求方式
			url: 'https://api-vue-base.itheima.net/api/joke/list', // 请求地址
			data: {
				num: 3
			} // 请求参数
		})
		console.log(res)
		// 注意：这个接口返回的是一个对象
		//res.data 是后端返回的数据，res.data.data 才能访问到对象中的数据
		jokeList.value = res.data.data
		// 数据加载完毕，隐藏 loading
		uni.hideLoading()
	}
	getJokeList()
	// 下拉刷新事件
	//  1. 再 pages.json 中添加配置 "enablePullDownRefresh": true 
	//  2. 通过 import 导入 onPullDownRefresh 事件后，才能使用
	onPullDownRefresh(async () => {
		// 开启 lading 提示
		uni.showNavigationBarLoading({
			title: '下拉刷新中...'
		})
		// await 等待笑话数据获取，数据获取成功后，才关闭下拉刷新效果
		await Promise.all([getJoke(), getJokeList()])
		//关闭loading提示
		uni.hideNavigationBarLoading()
		//数据获取成功，关闭下拉刷新
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss">
	.joke {
		padding: 20rpx;
		align-items: center;

		.joke-image {
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
		}

		.joke-button {
			//设置背景色为主题色
			background-color: $uni-color-primary;
			margin-bottom: 20rpx;
		}

		.joke-item {
			padding: 20rpx;

			// &            表示当前选择器本身，也就是 .joke-item
			// :not()       排除
			// :last-child  最后一个子项
			&:not(:last-child) {
				border-bottom: 1rpx solid #f60;
			}
		}
	}
</style>